<template>
  <!-- 留言联系 -->
  <!-- 右边 -->
  <div class="content-r">
    <div class="about-right">
      <h1 class="about-title">关于作者</h1>
      <div class="about-content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="留言主题" prop="liuyan" class="label-title">
            <el-input v-model="ruleForm.ly" class="about-input"></el-input>
          </el-form-item>

          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="手机" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="QQ" prop="qq" class="label-qq">
            <el-input v-model="ruleForm.qq"></el-input>
          </el-form-item>

          <el-form-item label="留言内容" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交留言</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <h3>留言联系：</h3>
        <p>1，感谢您的留言，您的每一条留言作者都会认真查看。</p>
        <p>2，请填写正确的联系方式，以便我们与您取得联系。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessaegContact",
  data() {
    return {
      ruleForm: {
        //表单的数据对象
        ly: "",
        name: "",
        tel: "",
        email: "",
        qq: "",
        desc: "",
      },
      rules: {
        //表单的验证规则，  与标签中的prop属性值对应
        ly: [
          { required: true, message: "请输入您的留言主题", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            triggle: "blur",
          },
        ],
        name: [
          //trigger:'blur'表示光标离开再触发
          { required: true, message: "请留下您的姓名", trigger: "blur" },
        ],
        tel: [
          { required: true, message: "请输入正确的手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号格式不正确", triggle: "blur" },
        ],
        email: [
          { required: true, message: "请输入您的邮箱地址", trigger: "blur" },
          { type: "email", triggle: "blur" },
        ],
        desc: [
          {
            required: true,
            message: "没有内容的留言是不完整的哦",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      // 提交表单
      //点击提交后触发的事件
      // 首先验证表单
      // 在
      // $refs表示不断接收ref
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { data } = await this.$axios({
            method: "POST",
            url: "/contact",
            data: this.ruleForm,
          });
          // console.log(data);
          if(data.code) return this.$message.error(data.message);
          this.$message.success("反馈成功");
          this.$refs.ruleForm.resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      //重置表单
      this.$refs[formName].resetFields();
    },
    async getArticles() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getdata/article",
      });
      if (data.code) return this.$message.error(data.message);
      this.hotArticle = data.data.slice(0, 6); // 0-6下标位置的文章数据
    },
  },
  created() {
    this.getArticles();
  },
};
</script>

<style lang="less" scoped>
// 右边
.content-r {
  margin-left: 300px;
}
.about-right {
  float: right;
  width: 100%;
  max-width: 900px;
  margin-bottom: 15px;
  background-color: #fff;
}
.about-right .about-title {
  padding: 0 20px;
  height: 75px;
  line-height: 75px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  font-size: 20px;
  font-weight: 400;
}
.about-right .about-content {
  padding: 30px;
  font-size: 14px;
  line-height: 1.8;
  // text-align: center;
}
.about-content p {
  margin: 10px 0;
}
.about-content .about-img {
  width: 840px;
  height: 360px;
  margin: 0 auto 20px;
}
.about-img img {
  width: 840px;
  height: 360px;
}
// 表单部分
.el-input {
  // text-align: center;
  width: 315px;
}
/deep/ .el-form {
  width: 500px;
  text-align: center;
  margin: 0 auto;
}
/deep/ .el-form-item__label {
  text-align: left;
}
.el-form-item:nth-child(5) /deep/ .el-form-item__label {
  padding-left: 12px;
}
.el-form-item /deep/ .el-form-item__content {
  flex: 0 !important;
}
.el-form {
  text-align: center;
}
.el-form-item__content .el-textarea /deep/ .el-textarea__inner {
  display: block;
  width: 315px;
  height: 120px;
  resize: none;
}
.el-form /deep/ .el-form-item:last-child {
  display: inline-block;
  width: 300px;
  padding-left: 0;
}
.el-form .el-form-item:last-child /deep/ .el-form-item__content {
  margin-left: 0 !important;
  width: 180px;
}
// .el-form-item /deep/ .el-form-item__content:last-child {
//   display: block !important;
//   width: 300px !important;
// }
</style>>

